<template>
  <div class="br-layout-relative">
    <div class="br-layout-horizontal">
      <div class="menus-panel" :style="{'width':collapse?'30px':'180px'}">
        <div class="collapse-icon">
          <i class="el-icon-s-fold" @click="collapse=true" v-if="!collapse" />
          <i class="el-icon-s-unfold" @click="collapse=false" v-if="collapse" />
        </div>
        <div class="menus-list" :style="{'display':collapse?'none':'block'}">
          <div class="menu"
          v-for="(item, index) in menus"
          :key="index"
          @click="itemClick(item.path)" :style="{'color':item.path===path?'#FFFFFF':''
          ,'background-color':item.path===path?'#3D6480':''}">
            <div class="icon"><i :class="item.icon"></i></div>
            <div class="title">{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="content" :style="{'width':collapse?'calc(100% - 30px)':'calc(100% - 180px)'}">
        <router-view :key="path"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        collapse: false,
        path: "/system/database",
        menus: [{
          id: 1,
          name: "数据连接",
          icon: "iconfont  icon-shujuku1",
          path: "/system/database"
        },{
          id: 2,
          name: "子服务器",
          icon: "iconfont  icon-fuwuqi",
          path: "/system/slave"
        },{
          id: 1,
          name: "服务集群",
          icon: "iconfont  icon-jiqun",
          path: "/system/cluster"
        }]
      }
    },
    computed: {
      ...mapGetters(['sidebar']),
      isHeight() {
        return this.sidebar.height;
      }
    },
    methods: {
      itemClick(path) {
        if (this.path === path)
          return;
        this.path = path;
        sessionStorage.setItem("system-menu", path);
        this.to();
      },
      to() {
        this.$router.push({
          path: this.path
        })
      }
    },
    created() {},
    mounted() {
      let systemMenu = sessionStorage.getItem("system-menu");
      if (systemMenu) {
        this.path = systemMenu;
        if (this.$route.path !== this.path)
          this.to();
      } else {
        this.to();
      }
    },
    beforeDestroy() {
      sessionStorage.removeItem("system-menu");
    }
  };
</script>

<style lang="less" scoped>

  .menus-panel {
    display: table-cell;
    position: relative;
    width: 180px;
    background-color: #35566e;
    transition: width .2s linear;
  }

  .menus-panel .collapse-icon {
    text-align: center;
    line-height: 1;
    right: 7px;
    top: 10px;
    position: absolute;
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
  }

  .menus-panel .menus-list {
    position: absolute;
    top: 30px;
    overflow: auto;
  }

  .menus-panel .menus-list .menu {
    height: 36px;
    display: flex;
    padding-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #EDF3FA;
    font-size: 14px;
    cursor: pointer;
  }

  .menus-panel .menus-list .menu:hover {
    background-color: #ffffff0d;
  }

  .menus-panel .menus-list .icon {
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: table-cell;
    text-align: center;
  }

  .menus-panel .menus-list .title {
    display: table-cell;
    width: 134px;
    height: 36px;
    line-height: 36px;
  }

  .content {
    display: table-cell;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #FFFFFF;
  }
</style>
